import { Component, ReactNode } from "react"
import { Link } from "react-router-dom"
import * as api from "../../api/index"

type Istate = {
    data: object[]
}

class List extends Component<any, Istate> {
    state = {
        data: []
    }
    componentDidMount(): void {
        // console.log(api)
        api.getList()
            .then((res: any) => {
                // console.log(res);
                let data: object[] = res.result
                this.setState({
                    data
                })
            })
    }
    render(): ReactNode {
        // 渲染列表
        let { data } = this.state
        let lis: React.ReactNode = data.map((item: { [k: string]: any }) => {
            return (
                <li key={item._id}>
                    <Link to={`/detail/${item.productId}`}>{item.productName}</Link>
                </li>
            )
        })
        return (
            <fieldset>
                <legend>列表</legend>
                <ul>
                    {lis}
                </ul>
               
            </fieldset>
        )
    }
}

export default List